/**
 * 文档作者: wj
 * 创建时间：2018年05月13日
 * 修改时间：2018年05月13日
 * 描述信息：商品详情页面
 */

import React, {Component} from 'react';
import './product-details.scss';
import userModel from '../api/user.model';
import Swiper from '../components/swiper/swiper';
import Comment from '../components/comment/comment';
import util from '../../util/util';
import windowService from '../api/window.service';

class ProductDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            productInfo: undefined,
            commentList: undefined,
            quantity: 1,
            freight: 0,
        }
        this.price = 0;
        this.sku = window.location.search.replace('?sku=', '');
    }

    componentDidMount() {
        util.setTitle('商品详情');
        const obj = {
            uid: userModel.svcRegWithWx.uid,
            apptoken: userModel.svcRegWithWx.apptoken,
            sku: this.sku
        };
        Promise.all([util.getApiData('post', '/svcShop/svcLoadSkuDetail', obj),
        util.getApiData('post', '/svcShop/svcCmtLoadList', obj)]).then(res => {
            this.setState({
                productInfo: res[0].data.info.data,
                commentList: res[1].data.info.data,
            })
        });
        if (windowService.getAddressNode()) this.countFreight();
    }

    render() {
        const info = this.state.productInfo;
        const address = windowService.getAddressNode();
        if (info) {
            this.price = info.price * this.state.quantity + this.state.freight;
        }
        return this.state.productInfo ? <div className='product-details-page'>
            <Swiper isShow={true} props={this.props} data={info.image || []}></Swiper>
            <div className='content'>
                <div className='top'>
                    <h1><span>{info.title}</span><p className='money'>单价¥&nbsp;{info.price}</p></h1>
                    <p className='param'>{info.param || '暂无介绍！'}</p>
                    <p>单位：&nbsp;{info.unit_weight}{info.unit}</p>
                    <p className='both-left-center'>数量：
                    <button onClick={this.count.bind(this, 'sub')} className='count'>-</button>
                    <input type='number' value={this.state.quantity} onChange={this.onValueChange.bind(this)} />
                    <button onClick={this.count.bind(this, 'add')} className='count'>+</button></p>
                    <p className='both-left-center'>地址：&nbsp;
                        <span className='gray'>{address ? `${address.province}${address.city}${address.address}` : '点右边图片添加修改'}</span>
                        <img alt='logo' onClick={this.onJumpAddress.bind(this)} 
                            className='logo1' 
                            src={require('../../assets/img/address.png')} />
                    </p>
                    <p>积分抵扣：&nbsp;
                        <span className='green'>10积分=1元</span>
                        <img alt='logo' className='logo2' src={require('../../assets/img/yes.png')} />
                    </p>
                    <p>总价：&nbsp;
                        <span className='green big'>¥ {this.price}</span>
                    </p>
                </div>
                <button onClick={this.onPayment.bind(this)} className='submit'>点击下单</button>
                
                <Comment data={this.state.commentList}></Comment>
            </div>
            
        </div> : ''
    }


    /**
     * 计算运费
     * @param {Number} num 数量
     */
    countFreight(num=1) {
        const obj = {
            uid: userModel.svcRegWithWx.uid,
            apptoken: userModel.svcRegWithWx.apptoken,
            sku: window.location.search.replace('?sku=', ''),
            buy_nums: num,
            province: windowService.getAddressNode().province
        };
        util.getApiData('post', '/svcShop/svcComTranFee', obj).then(res => {
            this.setState({
                freight: res.data.info.data
            })
        })
    }

    /**
     * input输入的值改变
     * @param {InputElement} event 输入的input节点属性
     */
    onValueChange(event) {
        this.setState({
            quantity: event.target.value
        })
    }
    
    /**
     * 
     * @param {sub | add} value 单击加还是减
     */
    count(value) {
        const val = Number(this.state.quantity);
        this.setState({
            quantity: val+ (value === 'sub' ? (val > 1 ? -1 : 0) : 1)
        })
    }

    /** 跳转到收获地址 */
    onJumpAddress() {
        this.props.history.push(`/address${window.location.search}`);
    }

    /** 点击调转到支付页面 */
    onPayment() {
        if (windowService.getAddressNode()) {
            this.props.history.push(`/payment?payment=${this
                .price}&price=${this.state.productInfo.price}&sku=${this
                    .sku}&buy_nums=${this.state.quantity}&fee_tran=${this
                        .state.freight}&addr_id=${windowService.getAddressNode().id}`);
        } else {
            window.$message.next({info: 'error', content: '请选择收货地址'});
        }
    }
    
}

export default ProductDetails;